<template>
  <div>
    <!-- 搜索 -->
    <div class="search">
      <div>
        <el-input class="search-input"  v-model="input" style="width: 240px" placeholder="关键字" />
        <el-input class="search-input" v-model="input" style="width: 240px" placeholder="登录日期" />
        <el-button class="search-button" type="info">搜索</el-button>
      </div>
      <el-button class="search-button" plain @click="open()">显示折线图</el-button>
    </div>
    <!-- 全部 -->
    <div class="operation">
      <el-button type="primary">全部</el-button>
      <el-button type="primary">接待</el-button>
      <el-button type="primary">已入训</el-button>
      <el-button type="primary">删除</el-button>
      <el-button type="primary">导出列表</el-button>
      <el-button type="primary">新增登记</el-button>
    </div>

    <!-- 表格 -->
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column
          label="日期"
          property="date"
          width="120"
          align="center"
        >
          <template #default="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column
          property="name"
          label="儿童姓名"
          width="120"
          align="center"
        />
        <el-table-column label="性别" property="sex" align="center" />
        <el-table-column label="联系电话" property="phone" align="center" />
        <el-table-column label="了解渠道" property="know" align="center" />
        <el-table-column label="状态" property="status" align="center" />
        <el-table-column label="类型" property="type" align="center" />
      </el-table>
    </div>
    <!-- 分页 -->
    <div>
      <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="100"
      layout="total, prev, pager, next, jumper"
      style="margin-top: 20px"
    />
    </div>
    <!-- 对话框 -->
    <div>
      <el-dialog v-model="dialogTableVisible" title="Tips" width="600px">
        <div id="main" style="width: 400px; height: 300px"></div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted,nextTick,computed } from "vue";
import * as echarts from "echarts";

const input = ref("");
const currentPage = ref(1);
const pageSize = ref(5);

// 图表
const dialogTableVisible = ref(false);
const main = ref(null);
const option2 = ()=>{
   // 初始化图表
  const myChart = echarts.init(document.getElementById("main"));

  const option = {
    title: {
      text: "ECharts 入门示例",
    },
    tooltip: {},
    legend: {
      data: ["销量"],
    },
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20],
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
};
const open = () =>{
  dialogTableVisible.value = true;
  nextTick(()=>{
    option2();
  })
}

onMounted(() => {
 
});

const tableData = ref([
  {
    date: "2016-05-04",
    name: "Aleyna Kutzner",
    address: "Lohrbergstr. 86c, Süd Lilli, Saarland",
    sex: "男",
    phone: "1555344874",
    know: "微信",
    status: "未入训",
    type: "学生",
  },
  {
    date: "2016-05-03",
    name: "Helen Jacobi",
    address: "760 A Street, South Frankfield, Illinois",
    sex: "男",
    phone: "1555344874",
    know: "微信",
    status: "以入训",
    type: "学生",
  },
  {
    date: "2016-05-02",
    name: "Brandon Deckert",
    address: "Arnold-Ohletz-Str. 41a, Alt Malinascheid, Thüringen",
    sex: "女",
    phone: "1555344874",
    know: "微信",
    status: "未入训",
    type: "学生",
  },
  {
    date: "2016-05-01",
    name: "Margie Smith",
    address: "23618 Windsor Drive, West Ricardoview, Idaho",
    sex: "女",
    phone: "1555344874",
    know: "微信",
    status: "未入训",
    type: "学生",
  },
]);

// 分页
const handlePageChange = (page) => {
  currentPage.value = page;
};

const handleSearch = () => {
  currentPage.value = 1;
};
</script>

<style  scoped>
.search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
}
.search > div {
  display: flex;
  gap: 10px;
}
.search-input {
  flex: 1;
  min-width: 240px;
}
.search-button {
  height: 38px;
}
.operation {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.operation el-button {
  flex: 1;
  min-width: 100px;
}
</style>